<template>
	<view :data-theme="themeStyle"
		:style="{ backgroundColor: bgColor ,backgroundImage: bgImg, backgroundPositionY: -navbarHeight+'px', minHeight:'calc(100vh - 55px-55px)'}"
		class="page_img">
		<!-- #ifndef H5 -->
		<view class="page-header">
			<ns-navbar :is-back="!1" :background="bgNav" :title-color="textNavColor" :border-bottom="false"
				:globalS="diyData.global" z-index="1001" :type="index" type="index" ref="topNav"></ns-navbar>
		</view>
		<!-- #endif -->
		<diy-index-page ref="indexPage" :value="topIndexValue" :minHeight="minHeight" :scrollHeight="scrollHeight"
			:scrollTopHeight="scrollTopHeight" :bgUrl="bgUrl" v-if="topIndexValue">
			<diy-group :diyData="diyData" :storeId="storeId" v-if="diyData.value" :height="scrollTopHeight"></diy-group>
			<view class="padding-bottom">
				<ns-copy-right></ns-copy-right>
			</view>
		</diy-index-page>

		<view scroll-y="true" show-scrollbar="false" :style="{height:'calc(100vh - headerHeight - 55px)'}" v-else>
			<view class="bg-index" :style="backgroundUrl">
				<diy-group :diyData="diyData" v-if="diyData.value" :storeId="storeId"></diy-group>
				<view class="cart-line" v-if="cart_show || isShowPoint"></view>
				<view class="padding-bottom">
					<ns-copy-right></ns-copy-right>
				</view>
			</view>
		</view>
		<template
			v-show="diyData.global.popWindow && diyData.global.popWindow.count != -1 && diyData.global.popWindow.imageUrl">
			<view @touchmove.prevent.stop>
				<uni-popup ref="uniPopupWindow" type="center" class="wap-floating" :maskClick="false">
					<view class="image-wrap">
						<image :src="$util.img(diyData.global.popWindow.imageUrl)"
							:style="{height: 480 * diyData.global.popWindow.imgHeight / diyData.global.popWindow.imgWidth + 'rpx'}"
							@click="redirectTo(diyData.global.popWindow.link)"></image>
					</view>
					<text class="iconfont iconroundclose" @click="closePopupWindow"></text>
				</uni-popup>
			</view>
		</template>
		<view class="pick-up-point" v-if="isShowPoint" :class="{ active: isIphoneX }" :style="{ bottom: cartBottom }">
			<view class="pick-up-point-desc">{{!tokenStore ? '马上登录抢爆款商品' : !address ? '选择提货点，即可选购商品' : ''}}</view>
			<view class="pick-up-point-box">
				<button class="pick-up-point-btn color-base-bg"
					@click="toSelect">{{!tokenStore ? '去登录' : !address ? '去选择' : ''}}</button>
				<text class="iconfont iconclose" @click="closePoint"></text>
			</view>
		</view>
		<view class="cart-box" v-if="tokenStore && cart_show && !isShowPoint" :class="{ active: isIphoneX }"
			:style="{ bottom: cartBottom }">
			<text class="cart-item">已加购<text class="color-base-text">{{cartNumber}}件</text>商品</text>
			<view class="pay-box">
				<text>合计:</text>
				<text class="color-price-text">￥ <text
						class="price-text-40">{{cartPrice.toFixed(2).split('.')[0]}}</text><text
						class="price-text-32">.{{cartPrice.toFixed(2).split('.')[1]}}</text></text>
				<button type="default" class="color-base-bg" @click="pay()">去结算({{cartNumber}})</button>
			</view>
		</view>
		<!-- 底部tabBar -->
		<view class="tabBar-fill"></view>
		<view class="page-bottom" v-if="openBottomNav">
			<diy-bottom-nav type="shop" @callback="callback"></diy-bottom-nav>
		</view>
		<!-- 收藏 -->
		<uni-popup ref="collectPopupWindow" type="top" class="wap-floating wap-floating-collect">
			<view v-if="showTip" class="collectPopupWindow" :style="{marginTop:collectTop + statusBarHeight +'px'}">
				<image :src="$util.img('/upload/uniapp/collect2.png')" mode="aspectFit"></image>
				<text @click="closeCollectPopupWindow">我知道了</text>
			</view>
		</uni-popup>
		<loading-cover ref="loadingCover"></loading-cover>
		<ns-login ref="login"></ns-login>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import diyBottomNav from '@/components/diy-bottom-nav/diy-bottom-nav.vue';
	import WxMap from 'common/js/map-wx-jssdk.js';
	import diyLive from '@/components/diy-live/diy-live.vue';
	import diyIndexPage from '@/components/diy-index-page/diy-index-page.vue';
	import diyGroup from '@/components/diy-group/diy-group.vue';
	import nsNavbar from '@/components/ns-navbar/ns-navbar.vue';
	import {
		Weixin
	} from 'common/js/wx-jssdk.js';
	import globalConfig from '@/common/js/golbalConfig.js';
	import nsCopyRight from '@/components/ns-copyright/ns-copyright.vue';
	let systemInfo = uni.getSystemInfoSync();
	export default {
		components: {
			uniPopup,
			diyBottomNav,
			nsNavbar,
			diyIndexPage,
			diyGroup,
			nsCopyRight
		},
		data() {
			return {
				isnetwork: false,
				diyData: {
					global: {
						title: '',
						popWindow: {
							imageUrl: '',
							count: -1,
							link: {},
							imgWidth: '',
							imgHeight: ''
						}
					}
				},
				navTitle: "",
				siteInfo: null,
				memberId: 0,
				id: 0,
				store: {}, //首页展示的门店详情
				storeId: 0, //首页展示的门店id

				latitude: null, // 纬度
				longitude: null, // 经度

				showStore: false,
				isIphoneX: false,

				pageHeight: '0',
				headerHeight: '0',
				bottomHeight: '0',
				topIndexValue: null,
				copyight: [],
				statusBarHeight: systemInfo.statusBarHeight,
				collectTop: 44,
				showTip: false,
				mpCollect: false,
				cartBottom: '56px',
				token: '',
				address: '',
				cart_show: false,
				isShowPoint: false
			};
		},
		//下拉刷新
		async onPullDownRefresh() {
			await this.getDiyInfo();
		},
		watch: {
			storeId() {
				this.$forceUpdate();
			}
		},
		onLoad(data) {
			uni.hideTabBar();
			if (data.source_member) {
				uni.setStorageSync('source_member', data.source_member);
				this.setcommunity()
			}

			// 小程序扫码进入
			if (data.scene) {
				var sceneParams = decodeURIComponent(data.scene);
				sceneParams = sceneParams.split('&');
				if (sceneParams.length) {
					sceneParams.forEach(item => {
						if (item.indexOf('source_member') != -1) {
							let _source_array = item.split('-')
							uni.setStorageSync('source_member', _source_array[1]);
							this.setcommunity()
						}
					});
				}
			}
		},
		onHide() {
			// 清除限时秒杀定时器
			this.$store.commit('setDiySeckillInterval', null);
			this.$store.commit('setDiyCommunity', null);
		},
		async onShow() {
			if (uni.getStorageSync('token')) {
				this.token = uni.getStorageSync('token')
				this.$store.commit("setTokenStore", this.token);
				this.getAddress();
				this.$store.dispatch('getCartNumber');
				this.$store.dispatch('getCartPrice');
				this.$store.dispatch('getCartIds');
			} else {
				this.token = ''
				this.cart_show = false;
				this.isShowPoint = true;
				this.$store.commit("setTokenStore", null);
			}

			if (this.$refs) {
				uni.$emit('getSkuGoodsList')
			}

			await this.refresh();
			this.$store.dispatch("getThemeStyle");
			this.getHeight();
			this.$store.commit('setDiySeckillInterval', 1);
			this.$store.commit('setDiyCommunity', 1);

			this.isIphoneX = this.$util.uniappIsIPhoneX();
			/* if (this.$util.uniappIsIPhone11()) {
				this.cartBottom = '90px';
			} */
			uni.getLocation({
				type: 'gcj02',
				success: res => {
					this.saveLocation(res);
				},
				fail: () => {
					this.$api.sendRequest({
						url: '/api/address/ipLocation',
						success: res => {
							if (res.code !== 0) return;
							this.saveLocation({
								latitude: res.data.location.lat,
								longitude: res.data.location.lng
							});
						}
					})
				}
			});
		},
		mixins: [globalConfig],
		onPageScroll(e) {
			if (this.$refs.topNav) {
				if (e.scrollTop >= 20) {
					this.$refs.topNav.navTopBg()
				} else {
					this.$refs.topNav.unSetnavTopBg()
				}
			}
		},
		async mounted() {

		},
		computed: {
			tokenStore() {
				// this.token = this.$store.state.tokenStore;
				if (this.$store.state.tokenStore) {
					this.getAddress();
					this.$store.dispatch('getCartNumber');
					this.$store.dispatch('getCartPrice');
				}
				this.$store.commit('setDiyCommunity', 1);
				return this.$store.state.tokenStore;
			},
			cartNumber() {
				if (this.$store.state.cartNumber == 0) {
					this.cart_show = false
				} else {
					this.cart_show = true
				}
				return this.$store.state.cartNumber;
			},
			cartPrice() {
				return this.$store.state.cartPrice;
			},
			cartIds() {
				return this.$store.state.cartIds;
			},
			top() {
				let top = 0;
				// #ifndef h5
				top = this.isIphoneX ? 180 : 140;
				// #endif
				// #ifdef H5
				top = 90;
				// #endif
				return top;
			},
			bgColor() {
				let str = '';
				if (this.diyData && this.diyData.global) {
					str = this.diyData.global.bgColor;
				}
				return str;
			},
			bgImg() {
				let str = '';
				if (this.diyData && this.diyData.global) {
					str = this.diyData.global.topNavbg ? 'url(' + this.$util.img(this.diyData.global.bgUrl) + ')' : this
						.diyData.global
						.bgColor;
				}

				return str;
			},
			bgUrl() {
				let str = '';
				if (this.diyData && this.diyData.global) {
					str = this.diyData.global.topNavbg ? 'transparent' : this.diyData.global.bgUrl;
				}
				return str;
			},
			bgNav() {
				if (this.diyData.global.topNavColor) {
					return {
						background: this.diyData.global.topNavColor
					};
				} else {
					return {
						background: '#ffffff'
					};
				}
			},
			backgroundUrl() {
				var str = this.bgUrl ? 'background:' + 'url(' + this.$util.img(this.bgUrl) + ') no-repeat 0 0/100%' : '';
				return str;
			},
			scrollHeight() {
				if (this.pageHeight != undefined && this.headerHeight != undefined && this.bottomHeight != undefined) {
					return 'calc(' + this.pageHeight + 'px - ' + this.headerHeight + ' - ' + this.bottomHeight + ')';
				} else {
					return '100vh';
				}
			},
			scrollTopHeight() {
				if (this.pageHeight != undefined && this.headerHeight != undefined && this.bottomHeight != undefined) {
					return 'calc(' + this.pageHeight + 'px - ' + this.headerHeight + ' - ' + this.bottomHeight +
						' - 80rpx)';
				} else {
					return '100vh';
				}
			},
			textNavColor() {
				if (this.diyData.global.textNavColor) {
					return this.diyData.global.textNavColor;
				} else {
					return '#ffffff';
				}
			},
			openBottomNav() {
				let str = false;
				if (this.diyData && this.diyData.global) {
					str = this.diyData.global.openBottomNav;
				}
				return str;
			},
			minHeight() {
				if (this.pageHeight != undefined && this.headerHeight != undefined && this.bottomHeight != undefined) {
					return 'calc(100vh - ' + this.headerHeight + ' - ' + this.bottomHeight + ' - 80rpx)';
				} else {
					return '100vh';
				}
			},
			globalS() {
				return this.diyData.global
			},
			// 转换字符数值为真正的数值
			navbarHeight() {
				// #ifdef APP-PLUS || H5
				let height = this.collectTop ? this.collectTop : 44;
				return height + 34;
				// #endif
			},
		},
		methods: {
			saveLocation(res) {
				// 上报位置显示
				this.$api.sendRequest({
					url: '/api/position/location',
					data: {
						latitude: res.latitude,
						longitude: res.longitude
					},
					success: res => {
						if(uni.getStorageSync('position_location_success')!=1){
							uni.setStorageSync('position_location_success',1);
							uni.reset()
						}
					}
				})
				// 位置存储到本地
				uni.setStorage({
					key: 'selfLocation',
					data: {
						latitude: res.latitude,
						longitude: res.longitude
					}
				});
			},
			toSelect() {
				if (this.token) {
					if (this.latitude && this.longitude) {
						this.$util.redirectTo('/otherpages/community/community_choose/community_choose', {
							latitude: this.latitude,
							longitude: this.longitude
						});
					} else {
						this.$util.redirectTo('/otherpages/community/community_choose/community_choose');
					}
				} else {
					this.$refs.login.open('/pages/index/index/index');
				}
			},

			closePoint() {
				this.isShowPoint = false;
			},
			// 获取地址信息
			getAddress() {
				this.$api.sendRequest({
					url: '/api/community/getMemberCommunity',
					success: res => {
						if (res.code >= 0) {
							this.isShowPoint = false;
							this.address = res.data.full_address;
							this.latitude = res.data.latitude;
							this.longitude = res.data.longitude;
							uni.setStorage({
								key: 'community_address',
								data: {
									community_id: res.data.cl_id
								},
								success: function() {
									console.log('自提点设置成功')
								}
							});
							this.SelectCart()
						} else {
							this.address = '';
							this.isShowPoint = true;
							this.cart_show = false
						}
					},
					fail: res => {
						this.$util.showToast({
							title: res.message
						})
					}
				})
			},
			callback() {
				if (this.$refs.indexPage) {
					this.$refs.indexPage.initPageIndex();
				}
			},
			async refresh() {

				this.store = uni.getStorageSync('store') ? uni.getStorageSync('store') : {};
				if (this.store) this.storeId = this.store.store_id;

				this.$langConfig.refresh();

				if (uni.getStorageSync('token')) {
					this.getMemberId();
				}
				this.getDefaultImg();
				await this.getDiyInfo();
				this.getCopyight();
			},
			//获取版权
			getCopyight() {
				this.$api.sendRequest({
					url: '/api/config/copyright',
					success: res => {
						let data = res.data;
						if (res.code == 0 && data) {
							this.copyight = res.data;
						}
					}
				});
			},
			redirectToJump(like) {
				if (like) {
					location.href = like;
				}
			},
			//计算高度
			getHeight() {
				var self = this;
				//获取页面可用区域的高度
				uni.getSystemInfo({
					success: res => {
						this.pageHeight = res.screenHeight;
					}
				});
				// #ifdef MP || APP-PLUS
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query
						.select('.page-header')
						.boundingClientRect(data => {
							this.headerHeight = data.height + 'px';
						})
						.exec();
				});
				// #endif
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query
						.select('.page-bottom')
						.boundingClientRect(data => {
							this.bottomHeight = 55 + 'px';
						})
						.exec();
				});
			},
			async getDiyInfo() {
				var name = 'DIYVIEW_INDEX';
				// if (this.storeId) name = 'DIY_STORE_' + this.storeId;
				this.$api.sendRequest({
					url: '/api/diyview/info',
					data: {
						name: name
					},
					async: true,
					success: res => {
						if (res.code != 0 || !res.data) {
							if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
							this.diyData = {};
							return;
						}
						let diyDatavalue = res.data;
						//处理后台组件input输入单引号问题 -- 英文状态下
						diyDatavalue.value = diyDatavalue.value.replace(/\@/g, "'");
						if (diyDatavalue.value) {
							this.diyData = JSON.parse(diyDatavalue.value);
							this.$langConfig.title(this.diyData.global.title);
							this.navTitle = this.diyData.global.title;
							this.mpCollect = this.diyData.global.mpCollect;
							if (this.diyData.global.popWindow && this.diyData.global.popWindow.imageUrl) {
								// 弹框形式，首次弹出 1，每次弹出 0
								setTimeout(() => {
									if (this.diyData.global.popWindow.count == 1) {
										var index_popwindow_count = uni.getStorageSync(
											'index_popwindow_count');
										if ((this.$refs.uniPopupWindow && index_popwindow_count ==
												'') || (this.$refs.uniPopupWindow &&
												index_popwindow_count == 1)) {
											this.$refs.uniPopupWindow.open();
											uni.setStorageSync('index_popwindow_count', 1);
										}
									} else if (this.diyData.global.popWindow.count == 0) {
										this.$refs.uniPopupWindow.open();
										uni.setStorageSync('index_popwindow_count', 0);
									}
								}, 500);
							}
							for (var i = 0; i < this.diyData.value.length; i++) {
								if (this.diyData.value[i].controller == 'TopCategory') {
									this.topIndexValue = this.diyData.value[i];
								}
							}

							// #ifdef MP
							//小程序收藏
							if (!uni.getStorageSync('isCollect') && this.diyData.global.mpCollect) {
								this.$refs.collectPopupWindow.open();
								// uni.setStorageSync('isCollect', true);
								// uni.getStorageSync('isCollect',true);
								this.showTip = true;
							}
							// #endif
						}
						uni.stopPullDownRefresh();
						setTimeout(() => {
							if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
						}, 1200);
						// if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					},
					fail: res => {
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},
			closePopupWindow() {
				this.$refs.uniPopupWindow.close();
				uni.setStorageSync('index_popwindow_count', -1);
			},
			closeCollectPopupWindow() {
				this.$refs.collectPopupWindow.close();
				uni.setStorageSync('isCollect', true);
			},
			redirectTo(link) {
				this.$util.diyRedirectTo(link);
			},
			// 获取默认图
			getDefaultImg() {
				this.$api.sendRequest({
					url: '/api/config/defaultimg',
					success: res => {
						let data = res.data;
						if (res.code == 0 && data) {
							uni.setStorageSync('default_img', JSON.stringify(data));
						}
					}
				});
			},
			setcommunity() {
				this.$api.sendRequest({
					url: '/api/community/updateMemberCommunity',
					data: {
						source_member: uni.getStorageSync('source_member')
					},
					success: res => {
						if (res.code == 0) {
							uni.setStorage({
								key: 'community_address',
								data: {
									community_id: res.data.cl_id
								},
								success: (res) => {
									console.log('自提点设置成功')
									uni.showToast({
										title: '设置成功',
										icon: 'none'
									})
								}
							});
						}
					}
				});
			},
			getMemberId() {
				this.$api.sendRequest({
					url: '/api/member/id',
					success: res => {
						if (res.code >= 0) {
							this.memberId = res.data;
						}
					}
				});
			},
			// #ifdef MP-WEIXIN
			// 分享到微信朋友圈
			onShareTimeline() {
				let query = '';
				if (this.memberId) query = 'source_member=' + this.memberId;
				return {
					title: '',
					query: query,
					imageUrl: ''
				};
			},
			// #endif
			// 购物车处理
			SelectCart() {
				if (this.$store.state.cartNumber != 0) {
					this.cart_show = true
				}
			},
			// 结算
			pay() {
				uni.setStorage({
					key: 'orderCreateData',
					data: {
						cart_ids: this.cartIds
					},
					success: () => {
						this.$util.redirectTo('/pages/order/payment/payment');
					}
				});

			}
		},
		onShareAppMessage(res) {
			var title = '';
			if (this.siteInfo) title = this.siteInfo.site_name;
			var path = '/pages/index/index/index';
			if (this.memberId) path += '?source_member=' + this.memberId;
			return {
				title: title,
				path: path,
				success: res => {},
				fail: res => {}
			};
		},
		onReady() {
			// 微信公众号分享
			// #ifdef H5
			if (this.$util.isWeiXin()) {
				this.$api.sendRequest({
					url: '/wechat/api/wechat/share',
					data: {
						url: window.location.href
					},
					success: res => {
						if (res.code == 0) {
							var wxJS = new Weixin();
							wxJS.init(res.data.jssdk_config);

							let shareConfig = res.data.share_config,
								url = this.$config.h5Domain + '/pages/index/index/index';
							if (this.memberId) url += '?source_member=' + this.memberId;

							wxJS.setShareData({
								title: shareConfig.shop_param_1 + shareConfig.site_name,
								desc: shareConfig.shop_param_2 + '\r\n' + shareConfig.shop_param_3 +
									'\r\n' + '收藏热度：★★★★★',
								link: url,
								imgUrl: this.$util.img(shareConfig.headimg)
							});
						}
					}
				});
			}
			// #endif
		}
	};
</script>

<style lang="scss">
	.padding-bottom {
		padding-bottom: 80rpx !important;
	}

	.color-price-text {
		color: #FF4544;
		font-size: 32rpx !important;
		font-family: PingFang SC;
		font-weight: bold;

		.price-text-40 {
			margin-right: 0 !important;
			font-size: 40rpx !important;
		}

		.price-text-32 {
			font-size: 32rpx !important;
		}
	}

	.collectPopupWindow {
		position: relative;
		height: 113rpx;
		width: 510rpx;
		margin-left: calc(100% - 530rpx);

		image {
			width: 100%;
			height: 100%;
		}

		text {
			color: #ff4544 !important;
			font-size: 24rpx !important;
			position: absolute;
			top: 48rpx;
			right: 25rpx;
		}
	}

	.zhezhao {
		width: 100vw;
		height: 100vh;
		background-color: transparent;
	}

	image {
		max-width: 100% !important;
		max-height: 100% !important;
	}

	.diy-wrap {
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		/* #ifdef MP-WEIXIN */
		height: 100vh;
		/* #endif */
	}

	.page_img {
		background-size: contain !important;
		background-repeat: no-repeat !important;
	}

	.bg-index {
		width: 100%;
		height: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.wap-floating {
		.image-wrap {
			width: 480rpx;

			image {
				width: 100%;
				border-radius: 40rpx;
			}
		}

		text {
			display: block;
			font-size: 60rpx;
			color: #ffffff;
			text-align: center;
		}
	}

	.wap-floating-collect .uni-popup__mask {
		background: transparent;
	}


	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}

	.popup-box {
		width: 450rpx;
		background: #ffffff;
		border-radius: $border-radius;
		overflow: hidden;

		.close_title {
			width: 100%;
			text-align: center;
			height: 70rpx;
			line-height: 70rpx;
			font-size: $font-size-base;
		}

		.close_content {
			width: 100%;
			max-height: 500rpx;
			padding: $padding;
			box-sizing: border-box;
		}

		.close_content_box {
			width: 100%;
			max-height: 460rpx;
			line-height: 1.3;
		}
	}

	.noStore-text {
		color: #000000 !important;
	}

	.isStore-top {
		margin-bottom: 10rpx;
	}

	.tabBar-fill {
		height: calc(constant(safe-area-inset-bottom) + 56px);
		height: calc(env(safe-area-inset-bottom) + 56px);
	}

	.cart-line {
		width: 100%;
		height: 100rpx;
	}

	.point-line {
		width: 100%;
		height: 100rpx;
	}

	.pick-up-point {
		z-index: 998;
		background-color: rgba(0, 0, 0, .7);
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: $padding $margin-both;
		box-sizing: border-box;
		position: fixed;
		bottom: 210rpx;
		left: 0;
		width: 100%;
		border-bottom: 2rpx solid $color-line;

		.pick-up-point-desc {
			color: #FFFFFF;
		}

		.pick-up-point-box {
			display: flex;
			justify-content: flex-end;
			align-items: center;

			button {
				width: 180rpx;
				height: 60rpx;
				padding: 0;
				line-height: 60rpx;
				text-align: center;
				color: #FFFFFF;
				font-size: 30rpx;
			}

			text.iconfont {
				font-size: 40rpx;
				color: #FFFFFF;
			}
		}

		&.pick-up-point-bottom {
			bottom: 110rpx;
		}
	}

	.cart-box {
		position: fixed;
		z-index: 5;
		width: 100vw;
		height: 100rpx;
		background: #fff;
		bottom: var(--window-bottom);
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: space-between;
		bottom: 56px;
		z-index: 9;
		padding: $padding;
		box-sizing: border-box;

		.cart-item {
			font-size: $font-size-tag;

			text {
				margin: 0 4rpx;
			}
		}

		.pay-box {
			display: flex;
			align-items: center;

			text {
				font-size: $font-size-base;
				margin-right: 10rpx;
			}

			.color-base-text {
				text {
					font-size: 32rpx;
					font-weight: bold;
				}
			}

			button {
				text-align: center;
				padding: 0;
				margin: 0;
				color: white;
				height: 74rpx;
				width: 176rpx;
				line-height: 70rpx;
			}
		}
	}

	.keep-on-record {
		text-align: center;
		padding-bottom: 20rpx;

		image {
			width: 150rpx;
			height: 60rpx;
		}
	}

	/deep/::-webkit-scrollbar {
		width: 0;
		height: 0;
		background-color: transparent;
		display: none;
	}

	.pick-up-point,
	.cart-box {
		bottom: 56px;
		bottom: calc(constant(safe-area-inset-bottom) + 56px) !important;
		bottom: calc(env(safe-area-inset-bottom) + 56px) !important;
	}

	/* .pick-up-point.active, .cart-box.active {
		bottom: 90px;
		bottom: calc(constant(safe-area-inset-bottom) + 55px) !important;
		bottom: calc(env(safe-area-inset-bottom) + 55px) !important;
	} */
</style>

<style scoped>
	.wap-floating>>>.uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
		background: none !important;
	}

	/* .noStore-bg /deep/ .search-box {
	background: #ffffff;
}

.noStore-bg /deep/ .single-graph {
	background: #ffffff;
} */
	/deep/ .placeholder {
		height: 0;
	}
</style>
